<template xmlns="http://www.w3.org/1999/html">
  <div class="dv1">
<!--搜索框  left-icon="arrow-left"-->
    <div >
      <van-search
          v-model="name"
          show-action
          left-icon="arrow-left"
          placeholder="请输入搜索关键词"
          @search="onSearch()"
          shape="round"
      >
        <template #action>
          <van-icon name="shopping-cart-o" @click="tz()" />
        </template>
      </van-search>
    </div>
    <!-- 导航栏   -->
    <div>
      <van-tabs v-model:active="active" @click-tab="loadData()">
        <van-tab title="销量" >
            <div >
              <div v-for="g in goods">
                <div class="dv">
                  <div >
                    <img class="img" :src="g.gimg"  @click="tz1()">
                  </div>
                  <div class="name">
                    {{g.gname}}
                  </div>
                  <div class="info">
                    {{g.gdescription}}
                  </div>
                  <div class="dv2">
                    <div style="float: left;color:red">{{g.gprice}}</div>
                    <div><van-icon name="shopping-cart-o" color="green" /></div>
                  </div>
                </div>
              </div>
            </div>
          <!--商品展示 -->
        </van-tab>
        <van-tab title="综合">
          <div>
            <div v-for="g in goods">
              <div class="dv">
                <div >
                  <img class="img" :src="g.gimg" @click="tz1()">
                </div>
                <div class="name">
                  {{g.gname}}
                </div>
                <div class="info">
                  {{g.gdescription}}
                </div>
                <div class="dv2">
                  <div style="float: left;color:red">{{g.gprice}}</div>
                  <div><van-icon name="shopping-cart-o" color="green" /></div>
                </div>
              </div>
            </div>
          </div>
        </van-tab>
        <van-tab title="价格" >
          <div>
            <div v-for="g in goods">
              <div class="dv">
                <div >
                  <img class="img" :src="g.gimg" @click="tz1()">
                </div>
                <div class="name">
                  {{g.gname}}
                </div>
                <div class="info">
                  {{g.gdescription}}
                </div>
                <div class="dv2">
                  <div style="float: left;color:red">{{g.gprice}}</div>
                  <div><van-icon name="shopping-cart-o" color="green" /></div>
                </div>
              </div>
            </div>
          </div>
        </van-tab>
      </van-tabs>
    </div>

  </div>
</template>

<script>
export default {
  name: "SearchView",
  data(){
    return{
        goods:[

        ],
      name:this.$route.query.name1,
      active:0,
      type:1
    }
  },
  mounted() {
    this.axios.get("/dd/search.do?gname="+this.name+"&type=1").then(res=>{
      if (res.data.code==200){
        console.log(res.data.data);
        this.goods=res.data.data;
      }
    })
  },
  methods:{
    onSearch(){
      console.log(this.name)
      this.axios.get("/dd/search.do?name="+this.name+"&type="+this.type).then(res=>{
        if (res.data.code==200){
          console.log(res.data.data);
          this.goods=res.data.data;
        }
      })
    },
    back(){
      history.back();
    },
    tz(){
      this.$router.push("/search1");
    },
    loadData(){
      console.log(this.type);
      this.type=this.active+1;
      this.axios.get("/dd/search.do?gname="+this.name+"&type="+this.type).then(res=>{
        if (res.data.code==200){
          console.log(res.data.data);
          console.log(this.type)
          this.goods=res.data.data;
        }
      })
    },
    tz1(){
      this.$router.push('/buyfood')
    }
  }
}
</script>

<style scoped>
  .dv1{
    margin-bottom: 50px;
  }
  .dv{
    margin-top: 10px;
    margin-left: 30px;
    float: left;
  }
  .img{
    float: left;
    border-radius: 5px;
    width:130px;
    height: 130px;
  }
  .name{
    font-size: 14px;
  }
  .info{
    font-size: 8px;
    color: darkgray;
  }
  .dv2{
    margin-left: 20px;
  }
</style>